<template>
    <div>
      <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>订单查询</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>

          <h2 style="text-align: left">订单查询</h2>
          <el-divider></el-divider>
          <el-row :gutter="20">

            <el-col :span="20">
              <el-row style="margin-bottom: 20px;text-align: left" >
                <span style="padding: 10px ;font-size: 15px;margin-right: 15px">订单类型</span>

                <el-select v-model="isCommodity" placeholder="请选择订单类型">
                  <el-option
                      v-for="item in isCommodityOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>

                <span style="padding: 10px;font-size: 15px;margin:0 15px" >订单状态</span>

                <el-select v-model="orderStatus" placeholder="请选择订单状态">
                  <el-option
                      v-for="item in orderStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-row>
            </el-col>

            <el-col :span="20">
              <el-row style="margin-bottom: 20px;text-align: left" >
                <span style="padding: 10px;font-size: 15px;margin-right: 15px" >订单编号</span>

                <el-input v-model="orderNum" placeholder="请输入订单编号" style="width: 300px"></el-input>

              </el-row>
            </el-col>

            <el-col :span="2">
              <el-button type="primary"  @click="getOrderList">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="clear">重置</el-button>
            </el-col>
          </el-row>

      </el-card>


      <el-card style="margin-top: 30px">
            <h4 style="text-align: left;font-weight: normal;margin-top: 0">订单列表</h4>
            <el-table :data="orderList" stripe>


              <el-table-column label="订单编号" prop="ordernum" width="200px"></el-table-column>

              <el-table-column label="用户信息" width="150px">
                <template slot-scope="scope">
                  {{scope.row.user.username}}<br>
                  {{scope.row.user.tel}}
                </template>
              </el-table-column>
              <el-table-column label="订单来源" width="100px">
                <template slot-scope="sc">{{sc.row.source==1?'APP':'线下实体店'}}</template>
              </el-table-column>

              <el-table-column label="订单状态" width="100px" >
                <template slot-scope="sc">
                  <span v-if="sc.row.orderStatus == 1">已完成</span>
                  <span v-if="sc.row.orderStatus == 2">已发货</span>
                  <span v-if="sc.row.orderStatus == 3">待发货</span>
                  <span v-if="sc.row.orderStatus == 4">待付款</span>
                </template>
              </el-table-column>

              <el-table-column label="支付方式" width="100px" >
                <template slot-scope="sc">
                  <span v-if="sc.row.paymethod == 1">微信支付</span>
                  <span v-if="sc.row.paymethod  == 2">支付宝支付</span>
                  <span v-if="sc.row.paymethod  == 3">银行卡支付</span>
                </template>
              </el-table-column>

              <el-table-column label="实付金额" prop="pricenew" width="120px"></el-table-column>

              <el-table-column label="下单时间" prop="gmtcreate" width="200px"></el-table-column>

                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text"  @click="goOrderDetails(scope.row)">订单详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>






    </div>
</template>
<script>
    export default {
        data() {
            return {
              orderNum:"",
              isCommodity:"",
              isCommodityOptions:[
                {
                  value: -1,
                  label: '全部'
                },
                {
                  value: 1,
                  label: '实体商品'
                },
                {
                  value: 0,
                  label: '线上课程'
                }
              ],
              orderStatus:"",
              orderStatusOptions:[
                {
                  value: 0,
                  label: '全部'
                },
                {
                  value: 1,
                  label: '已完成'
                },
                {
                  value: 2,
                  label: '已发货'
                },
                {
                  value: 3,
                  label: '待发货'
                },
                {
                  value: 4,
                  label: '待付款'
                },
              ],
              pageNum: 1,
              pageSize: 5,
              memberList: [],
              orderList:[],//所有用户列表
              userDetailsList:[],//用户详情
              total: 9,
              addFormVisible: false,
              editFormVisible:false,
              editGrowthVisible:false,//成长值
              editLabelVisible:false,//标签编辑
              labelList:[],
              labelids:[],
              editLabelForm:{
                id:"",
                username:"",
                labelId:[]
              },
              editGrowthForm:{
                uid:"",
                username:"",
                growthValue:"",
                beiZhu:""
             },
              editGrowthFormRules:{

          },
              editLabelFormRules:{
                /*  userCode: [
                     { required: true, message: "請輸入工号", trigger: "blur" },
                     { min: 4, max: 4, message: "工号必须是4个字符", trigger: "blur" }
                   ]*/
              },
            };
        },
        methods: {
          clear(){
            this.orderNum = '';
            this.isCommodity='';
            this.orderStatus=''
          },

          goOrderDetails(row){
            console.log(row)
            let url = "order/queryOrderDetail"
            this.$axios.get(url,{
              params:{
                id:row.id,
                isCommodity:row.isCommodity
              }
            }).then(res=>{
              if (res.data.code == 101){
                let orderDetailList = res.data.data
                this.$router.push({
                  path:"/OrderDetail/",
                  query:{
                    order:row,
                    orderDetailList:orderDetailList
                  }
                })
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })

          },

          getMemberList(){
            let url = "member/queryAllMember";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.memberList = res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });

          },


          getOrderList() {
            let url = "order/queryByCons";
            this.$axios.get(url,{
              params:{
                isCommodity:this.isCommodity,
                orderStatus:this.orderStatus,
                orderNum:this.orderNum,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if (res.data.code == 101){
                this.orderList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },


          handleSizeChange(newSize) {
              this.pageSize = newSize;
              this.getOrderList();
          },
          handleCurrentChange(newPage) {
              this.pageNum = newPage;
              this.getOrderList();
          },

          reloadData() {
              this.getOrderList();

          }
        },
        created() {
            this.reloadData();
        }
    };
</script>


<style lang="less" scoped>
.item {
  margin: 4px;
}

</style>